<template>
  <div>
    <el-drawer
      v-model="visible"
      :with-header="false"
      :append-to-body="true"
      size="1000"
      @close="close"
    >
      <div class="detail-body" v-loading="initLoading">
        <template v-if="!initLoading">
          <div class="detail-header">
            <div class="detail-source icon icon-order"></div>
            <div class="ml20">
              <div class="flex">
                <div class="fz16 fw">
                  {{ orderDetail.order_source.name }}
                </div>
              </div>
              <div class="flex mt5">
                <div class="text-grey">订单编号：</div>
                <div class="fz16">{{ orderDetail.order_no }}</div>
              </div>
            </div>
          </div>

          <div class="mt20 mb20">
            <ui-progress
              :number="progressNumber"
              :data="progressData"
            ></ui-progress>
          </div>

          <div class="detail-row">
            <div class="detail-row-item">
              <div class="detail-row-item-title">订单状态</div>
              <div
                class="detail-row-item-data"
                :class="`text-${orderDetail.order_status.color}`"
              >
                {{ orderDetail.status_text }}
              </div>
            </div>
            <div class="detail-row-item">
              <div class="detail-row-item-title">订单金额</div>
              <div class="detail-row-item-data">
                {{ orderDetail.order_total_price }}元
              </div>
            </div>
            <template v-if="orderDetail.pay_status.value">
              <div class="detail-row-item">
                <div class="detail-row-item-title">实际支付金额</div>
                <div class="detail-row-item-data">
                  {{ orderDetail.pay_price }}元
                </div>
              </div>
              <div class="detail-row-item">
                <div class="detail-row-item-title">支付方式</div>
                <div class="detail-row-item-data">
                  <pay-type :type="orderDetail.pay_type"></pay-type>
                </div>
              </div>
              <div class="detail-row-item">
                <div class="detail-row-item-title">支付时间</div>
                <div class="detail-row-item-data">
                  {{ orderDetail.pay_time }}
                </div>
              </div>
            </template>
          </div>
          <el-tabs v-model="tabActive" @tab-change="tabHandle">
            <el-tab-pane label="订单信息" name="info">
              <div class="detail-cell">
                <!--  -->
                <div class="detail-cell-list mt10">
                  <div class="detail-cell-item">
                    <span class="text-grey">订单来源：</span>
                    <span>{{ orderDetail.order_source?.name }}</span>
                  </div>
                  <div class="detail-cell-item">
                    <span class="text-grey">下单时间：</span>
                    <span>{{ orderDetail.create_time }}</span>
                  </div>
                </div>

                <div class="detail-cell-list mt10">
                  <div class="detail-cell-item">
                    <span class="text-grey">订单总价：</span>
                    <span>{{ orderDetail.order_total_price }}</span>
                  </div>
                  <div class="detail-cell-item">
                    <span class="text-grey">商品总数：</span>
                    <span>{{ orderDetail.total_num }}</span>
                  </div>
                </div>
                <!-- 配送 -->
                <div class="detail-cell-list mt10">
                  <div class="detail-cell-item">
                    <span class="text-grey">配送方式：</span>
                    <span>{{ orderDetail.delivery_type.name }}</span>
                  </div>
                  <div
                    class="detail-cell-item"
                    v-if="orderDetail.delivery_type.value == 'express'"
                  >
                    <span class="text-grey">邮费：</span>
                    <span v-if="orderDetail.express_free">包邮</span>
                    <span v-else>{{ orderDetail.express_price }}</span>
                  </div>
                </div>

                <!-- 支付信息 -->
                <div class="detail-cell-list mt10">
                  <div
                    class="detail-cell-item flex"
                    v-if="orderDetail.update_price.value > 0"
                  >
                    <div class="text-grey">后台改价：</div>
                    <div>{{ orderDetail.update_price.symbol }}</div>
                    <div class="price text-red">
                      <div class="price-icon">￥</div>
                      <div>{{ orderDetail.update_price.value }}</div>
                    </div>
                  </div>
                  <div
                    class="detail-cell-item"
                    v-if="orderDetail.pay_status.value"
                  >
                    <span class="text-grey">支付时间：</span>
                    <span>{{ orderDetail.pay_time }}</span>
                  </div>
                  <div
                    class="detail-cell-item flex"
                    v-if="orderDetail.pay_status.value"
                  >
                    <span class="text-grey">支付方式：</span>
                    <pay-type :type="orderDetail.pay_type"></pay-type>
                  </div>
                  <div
                    class="detail-cell-item"
                    v-if="
                      orderDetail.pay_status.value &&
                      orderDetail.pay_transaction
                    "
                  >
                    <span class="text-grey">交易流水号：</span>
                    <span>{{ orderDetail.pay_transaction }}</span>
                  </div>
                </div>

                <template
                  v-if="
                    orderDetail.refund_status.value &&
                    orderDetail.refund_status.value != 5
                  "
                >
                  <div class="detail-cell-list mt10">
                    <div
                      class="detail-cell-item flex"
                    >
                      <div class="text-grey">售后：</div>
                      <div :class="`text-${orderDetail.refund_status.color}`">
                        {{ orderDetail.refund_status.name }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>

              <div class="detail-cell mt20">
                <div class="detail-cell-head">买家留言：</div>
                <div class="mt10">
                  <span>{{ orderDetail.buyer_remark || "--" }}</span>
                </div>
              </div>

              <div class="detail-cell mt20">
                <div class="detail-cell-head">用户信息</div>
                <div class="mt20">
                  <userBox
                    :avatar="orderDetail.user_avatar"
                    :nick-name="orderDetail.user_nickName"
                    :id="orderDetail.user_id"
                  ></userBox>
                </div>
              </div>

              <div
                class="detail-cell mt20"
                v-if="orderDetail.delivery_type.value == 'slef_mention'"
              >
                <div class="detail-cell-head">自提信息</div>
                <div class="mt20">
                  <div>
                    <span class="text-grey">提货联系人：</span>
                    <span>{{ orderDetail.extract.linkname }}</span>
                  </div>
                  <div class="mt10">
                    <span class="text-grey">提货联系电话：</span>
                    <span>{{ orderDetail.extract.phone }}</span>
                  </div>
                </div>
              </div>

              <div
                class="detail-cell mt20"
                v-if="
                  orderDetail.delivery_type.value == 'express' &&
                  orderDetail.address
                "
              >
                <div class="detail-cell-head flex between">
                  <div>收货信息</div>
                  <div>
                    <template
                      v-if="
                        orderDetail.order_status.value == 2 &&
                        orderDetail.pay_status.value &&
                        !orderDetail.delivery_status.value &&
                        orderDetail.delivery_type.value == 'express'
                      "
                    >
                      <div>
                        <el-button
                          link
                          type="primary"
                          @click="_toUpdateAddress(operationId)"
                          v-permission="'store-order-detail'"
                          >修改地址</el-button
                        >
                      </div>
                    </template>
                  </div>
                </div>
                <div class="mt20">
                  <div>
                    <span class="text-grey">收货人：</span>
                    <span>{{ orderDetail.address.name }}</span>
                  </div>
                  <div class="mt10">
                    <span class="text-grey">收货电话：</span>
                    <span>{{ orderDetail.address.phone }}</span>
                  </div>
                  <div class="mt10">
                    <span class="text-grey">收货地址：</span>
                    <span>{{ orderDetail.address.full_address }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-cell mt20">
                <div class="detail-cell-head flex between">
                  <div>备注</div>
                  <div>
                    <el-button
                      link
                      type="primary"
                      @click="_onRemark(operationId)"
                      v-permission="'store-order-detail'"
                      >编辑备注</el-button
                    >
                  </div>
                </div>
                <div class="mt20">
                  <span>{{ orderDetail.remark || "--" }}</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品信息" name="goods">
              <template v-if="tabActive == 'goods'">
                <el-table :data="orderDetail.goods" row-key="id">
                  <el-table-column
                    prop="goods_name"
                    label="商品名称"
                    width="400"
                  >
                    <template #default="scope">
                      <div class="flex">
                        <el-avatar
                          shape="square"
                          :size="50"
                          :src="scope.row.goods_image"
                        ></el-avatar>
                        <div class="ml10">
                          <div class="te" style="width: 300px">
                            {{ scope.row.goods_name }}
                          </div>
                          <div class="mt5">
                            <span class="text-grey">规格:</span>
                            <span>{{ scope.row.sku_attr_text }}</span>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="bar_code" label="商品编码">
                    <template #default="scope">
                      <div>
                        {{ scope.row.bar_code }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="describe" label="单价(元)">
                    <template #default="scope">
                      <div>
                        {{ scope.row.price }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="describe"
                    label="购买数量"
                    align="center"
                  >
                    <template #default="scope">
                      <div>
                        {{ scope.row.total_num }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="describe" label="商品总价">
                    <template #default="scope">
                      <div>
                        {{ scope.row.total_price }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="发货记录" name="delivery"> </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <template #footer>
        <div v-if="!initLoading">
          <template v-if="orderDetail.order_status.value == 2">
            <template v-if="!orderDetail.pay_status.value">
              <el-button type="primary" v-permission="'store-order-update_price'" @click="_toUpdatePrice(operationId)"
                >调整价格</el-button
              >
              <el-button type="primary" v-permission="'store-order-offline_payment'" @click="_toOfflinePayment(operationId)"
                >线下支付</el-button
              >
              <el-button type="primary"  v-permission="'store-order-close'" @click="_onCloseOrder"
                >关闭订单</el-button
              >
            </template>
            <template
              v-if="
                orderDetail.pay_status.value &&
                !orderDetail.delivery_status.value
              "
            >
              <el-button type="primary"  v-permission="'store-order-delivery'" @click="_toOrderDelivery(operationId)"
                >去发货</el-button
              >
              <el-button type="primary"  v-permission="'store-order-update_address'" @click="_toUpdateAddress(operationId)"
                >修改地址</el-button
              >
            </template>

            <template
              v-if="
                orderDetail.delivery_status.value &&
                !orderDetail.receipt_status.value
              "
            >
              <el-button type="primary" v-permission="'store-order-receipt'" @click="_toOrderDelivery"
                >确定收货</el-button
              >
            </template>
          </template>
          <template v-if="orderDetail.order_status.value == 4">
            <!-- 订单取消审核 -->
            <el-button type="primary" v-permission="'store-order-cancel'" @click="_toOrderCancel(operationId)"
              >审核</el-button
            >
          </template>
        </div>
      </template>

      <updateAddress ref="updateAddressRef" @success="toInit"></updateAddress>
      <updatePrice ref="updatePriceRef" @success="toInit"></updatePrice>
      <offlinePayment
        ref="offlinePaymentRef"
        @success="toInit"
      ></offlinePayment>
      <orderDelivery ref="orderDeliveryRef" @success="toInit"></orderDelivery>
      <orderExtract ref="orderExtractRef" @success="toInit"></orderExtract>
      <orderCancel ref="orderCancelRef" @success="toInit"></orderCancel>
      <orderRemark ref="orderRemarkRef" @success="toInit"></orderRemark>
    </el-drawer>
  </div>
</template>
            

<script lang="ts">
export default {
  name: "orderDetail",
};
</script>
  
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import { closeOrder, getOrderDetail } from "@/api/store/order";
import userBox from "@/components/user/box.vue";
import updatePrice from "./update-price.vue";
import offlinePayment from "./offline-payment.vue";
import updateAddress from "./update-address.vue";
import orderDelivery from "./delivery.vue";
import orderExtract from "./extract.vue";
import orderCancel from "./cancel.vue";
import orderRemark from "./remark.vue";

import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";
import { ElMessageBox } from "element-plus";
import orderCommon from "./common";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["close"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const initLoading = ref<boolean>(true);

const orderDetail = ref<any>({});

const tabActive = ref<string>("info");

const tabHandle = (val: string, isInit: boolean = true) => {
  if (isInit) {
    listPage.value.page = 1;
    listPage.value.total = 0;
  }
  tabActive.value = val;
};

const toInit = () => {
  initLoading.value = true;
  getOrderDetail({
    id: operationId.value,
  })
    .then((res: Result) => {
      orderDetail.value = res.data;
      initProgress();
      setTimeout(() => {
        initLoading.value = false;
      }, 1000);
    })
    .catch((err: ResultError) => {});
};

const progressNumber = ref<number>(1);

const progressData = ref<any>([]);

// 计算步骤
const initProgress = () => {
  progressData.value = [];
  progressData.value.push({
    icon: "icon-xuanzhong",
    title: "下单",
  });
  progressData.value.push({
    icon: "icon-xuanzhong",
    title: "付款",
  });
  if (orderDetail.value.delivery_type.value == "express") {
    progressData.value.push({
      icon: "icon-xuanzhong",
      title: "发货",
    });
    progressData.value.push({
      icon: "icon-xuanzhong",
      title: "收货",
    });
    progressData.value.push({
      icon: "icon-xuanzhong",
      title: "完成",
    });
  } else {
    progressData.value.push({
      icon: "icon-xuanzhong",
      title: "取货",
    });
    progressData.value.push({
      icon: "icon-xuanzhong",
      title: "完成",
    });
  }

  progressData.value[0].time = orderDetail.value.create_time;
  if (orderDetail.value.pay_status.value) {
    progressNumber.value += 1;
    progressData.value[1].time = orderDetail.value.pay_time;
  }
  if (orderDetail.value.delivery_status.value) {
    progressNumber.value += 1;
    progressData.value[2].time = orderDetail.value.delivery_time;
  }
  // 已收货
  if (orderDetail.value.receipt_status.value) {
    progressData.value[3].time = orderDetail.value.receipt_time;
    progressNumber.value += 1;
  }
  if (
    orderDetail.value.delivery_type.value == "express" &&
    orderDetail.value.order_status.value == 1
  ) {
    progressData.value[4].time = orderDetail.value.receipt_time;
    progressNumber.value += 1;
  }
};

const lists = ref<any>([]);

const listInitLoading = ref<boolean>(false);

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  tabHandle(tabActive.value, false);
};

const updateAddressRef = ref<HTMLElement>();

const updatePriceRef = ref<HTMLElement>();

const offlinePaymentRef = ref<HTMLElement>();

const orderDeliveryRef = ref<HTMLElement>();

const orderExtractRef = ref<HTMLElement>();

const orderCancelRef = ref<HTMLElement>();

const orderRemarkRef = ref<HTMLElement>();

const open = (id: number = 0, groupId: number = 0) => {
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = () => {
  progressData.value.forEach((item: any) => {
    item.time = "";
  });
  progressData.value = [];
  progressNumber.value = 1;
  emit("close");
};

defineExpose({ open });

const {
  _onCloseOrder,
  _toOrderDelivery,
  _toUpdateAddress,
  _toOfflinePayment,
  _toUpdatePrice,
  _toOrderCancel,
  _onRemark,
} = orderCommon(toInit);
</script>
  
  <style scoped>
.detail-body {
  height: 100%;
}
.detail-header {
  display: flex;
}
.detail-source {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  color: var(--base-default);
  background: var(--el-color-primary-light-9);
}
.detail-row {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.detail-row-item {
  width: 20%;
}
.detail-row-item-title {
  color: #666;
}

.detail-row-item-data {
  margin-top: 10px;
}

.detail-cell {
}
.detail-cell-head {
  position: relative;
  margin-left: 12px;
  height: 30px;
  font-weight: bold;
  line-height: 30px;
}
.detail-cell-head::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 12px;
  left: -12px;
  top: calc(50% - 6px);
  background: var(--base-default);
}
.detail-cell-list {
  display: flex;
  flex-wrap: wrap;
}
.detail-cell-item {
  width: calc(100% / 3);
  margin-top: 10px;
}
</style>